import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Navigator,
    ListView,
    TouchableOpacity,
    Button,
    RefreshControl
} from 'react-native';
import NavigationBar from './js/common/NavigationBar'
import Toast, {DURATION} from 'react-native-easy-toast'
let data = {
    "result": [
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
        {"email": "junezm@foxmail.com", "fullName": "june"},
    ]
}
export default class FetchTest extends Component {
    constructor(props) {
        super(props)
        const ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2})

        this.state={
            result: [],
            dataSource: ds.cloneWithRows(data.result),
            isLoading: false
        }
    }
    renderRow(item) {
        return  <TouchableOpacity
                    onPress={()=>{
                        this.toast.show('you pressed:' + item.fullName, DURATION.LENGTH_LONG)
                     }
                    }
                >
            <View style={styles.row}>
                <Text>{item.fullName}</Text>
                <Text>{item.email}</Text>
            </View>
        </TouchableOpacity>
    }
    renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return <View key={rowID} style={styles.line}></View>
    }
    renderFooter() {
        return <Image style={{width: 100, height: 100}} source={{uri: 'https://segmentfault.com/u/junezm'}}></Image>
    }
    onLoad(url) {
        fetch(url)
            .then(res => res.json())
            .then(result => {
                this.setState({
                    result: JSON.stringify(result)
                })
            })
            .catch(error => {
                this.setState({
                    result: JSON.stringify(error)
                })
            })
    }
    render() {
        return (
            <View style={styles.container}>
                <NavigationBar
                    title='listviewtest'
                />
                <Button
                    title={'获取数据'}
                    onPress={() => {this.onLoad('https://www.easy-mock.com/mock/5bd57e90c34cb4563dc3a367/test')}}
                >获取数据</Button>
                <Text>{this.state.result}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center'
    },
    text: {
        fontSize: 20
    },
    row: {
        height: 50
    },
    line: {
        height: 1,
        backgroundColor: 'black'
    }
});